<template>
  <div class="bg">
    <div class="box" v-for="(item, index) in list" :key="index">
      <div class="nav"></div>
      <div class="header">
        <p>医院: {{ info.hspNme }}</p>
        <p>科室: {{ info.classq }}</p>
        <p>医生: {{ info.name }}({{info.doctorleval}})</p>
        <p>就诊时间: {{ info.year }}{{ info.week }}{{ info.time }}</p>
      </div>
      <div class="banner">
        <div>
          <van-collapse v-model="activeNames">
            <van-collapse-item name="1">
              <template #title>
                <div>挂号费用</div>
              </template>
              <template #value>
                <div class="first">{{ item.cost }}</div>
              </template>
              内容
            </van-collapse-item>
          </van-collapse>
        </div>
        <div>
          <van-cell title="本次支付" value-class="now" value="¥22.50" />
        </div>
        <div class="line"></div>
        <div>
          <van-cell title="支付方式" is-link value-class="wxpay">
            <div class="pay">
              <div class="img">
              <img src="../../../../assets/img/main/weixinzhifu.png" alt="" />
            </div>
            
            <div class="wxpay">微信支付</div>
            </div>
          </van-cell>
        </div>
      </div>
      <div class="footer">
        <div class="money"></div>
        <strong>付款金额:</strong>
        <span class="now">{{ item.cost }}</span>
        <div class="shore" @click="shore()">确认挂号</div>
      </div>
    </div>
  </div>
</template>
<script>
import { Collapse, CollapseItem } from "vant";
import { Cell, CellGroup } from "vant";
import { Toast } from 'vant';
export default {
  name: "index",
  data() {
    return {
      const: 1,
      info:"",//预约信息
      activeNames: ["0"],
      list: [
        {
          hospital: "河南省中医院",
          class: "心病科二病区",
          doctor: "黄斌(省级知名专家)",
          time: "2020-06-08周一09:42-09:48",
          cost: "¥22.50",
          thiscost: "¥22.50",
        },
      ],
    };
  },
  created() {
    this.value = this.const;
    this.info = JSON.parse(this.$route.query.info);
    console.log(this.info);
  },
  components: {},
  methods: {
    // 确认挂号
    shore(){
      Toast.success('预约成功');
    }
  },
};
</script>
<style lang="scss" scoped>
.pay {
  display: flex;
  justify-content: flex-end;
  .img {
    img {
      width: 20px;
      height: 20px;
      margin-right: 5px;
    }
  }
  .wxpay{
    margin-top: -2px;
  }
}
.line{
  width: 355px;
  height: 1px;
  background: #f5f4f4;
  margin: 0 auto;
}
.search-icon {
  font-size: 16px;
  line-height: inherit;
}
.wxpay {
  font-size: 16px;

  color: #333333;
  font-family: PingFang SC;
  font-weight: 500;
}
.first {
  color: red;
  font-size: 15px;
}
.now {
  color: red;
  font-size: 15px;
  margin-right: 20px;
}
.bg {
  .box {
    width: 100%;
    height: 100vh;
    background: #F6F6F6;
    position: relative;
    .nav {
      height: 44px;
    }
    .header {
      width: 100%;
      // height: 100%;
      padding-bottom: 10px;
      margin-left: 10px;
      padding-top: 20px;
      margin-bottom: 10px;
      // background: #ffffff;
      p {
        font-size: 15px;
        font-family: PingFang SC;
        font-weight: 500;
        // color: #c4c4c4;
        margin-bottom: 5px;
      }
    }
    .banner {
      .guahao {
        color: red;
        font-size: 15px;
        margin-right: 20px;
      }
    }
    .footer {
      width: 100%;
      height: 60px;
      background: #ffffff;
      font-size: 16px;
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .money {
        margin-left: -10px;
      }
      .shore {
        width: 160px;
        height: 60px;
        background: rgba(0, 210, 190, 1);
        color: #fff;
        font-size: 16px;
        text-align: center;
        line-height: 60px;
      }
    }
  }
}
</style>